<!--
 * @Author: Jieeeny
 * @Date: 2023-11-16 17:47:55
 * @LastEditors: Jieeeny 
 * @LastEditTime: 2024-01-09 16:13:56
 * @Description: 
 * @FilePath: \vite-vue3-ts-pinia-vueuse\src\page\renderform.vue
-->
<template>
  <div style="background-color: #f5f6f6">
    <header style="box-shadow: var(--el-box-shadow-lighter)">
      <div class="header-left">发起发起</div>
    </header>
    <div class="container"></div>
    <footer style="box-shadow: var(--el-box-shadow-lighter)">
      <el-button style="width: 80px">取消</el-button>
      <el-button type="primary" style="margin-left: 50px; width: 80px"
        >发起</el-button
      >
    </footer>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { ElementItem } from '@/utils/elements';

const fields = JSON.parse(localStorage.getItem('container') as string);
// const formOptions = {
//   validateAfterLoad: true,
//   validateAfterChanged: true,
//   validateAsync: true,
// };
const model = ref<{ [key: string]: any }>({});
onMounted(() => {
  if (fields?.length) {
    fields.map((item: ElementItem) => {
      console.log(item);
      model.value[item.key] = null;
    });
    console.log('🐰 ', fields, model.value);
  }
});
</script>

<style scoped lang="less">
header {
  height: 52px;
  padding: 0 10px;
  box-sizing: border-box;
  width: 100%;
  display: flex;
  align-items: center;
  background-color: #fff;
  // .header-left {
  //   height: 100%;
  // }
}
.container {
  height: calc(100vh - 124px);
}
footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  text-align: center;
  padding: 20px;
}
</style>
